<template lang="">
    <div class="container">
        <el-page-header @back="goBack" content="编辑问卷">
        </el-page-header>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-button class="emitQues" type="primary" @click="toPublish">发布问卷</el-button>
                <div class="base-shadow main-box button-group">
                    <el-button type="text" class="new-ques-button" icon="el-icon-thumb" @click="addSimple">单选
                    </el-button>
                    <span></span>
                    <el-button type="text" class="new-ques-button" icon="el-icon-more-outline" @click="addMultiple">多选
                    </el-button>
                    <span></span>
                    <el-button type="text" class="new-ques-button" icon="el-icon-tickets" @click="addFill(3)">单行填空
                    </el-button>
                    <span></span>
                    <el-button type="text" class="new-ques-button" icon="el-icon-document-copy" @click="addFill(2)">多行填空
                    </el-button>
                    <span></span>
                    <el-button type="text" class="new-ques-button" icon="el-icon-files" @click="addDrop">下拉框
                    </el-button>
                </div>
                <div class="base-shadow main-box button-group second-box ques-bank">
                    <BankForm></BankForm>
                </div>
            </el-col>
            <el-col :span="18" class="quesBody">
                <div class="base-shadow main-box pad">
                    <div @click="editName" class="quesTitle">
                        <h1 class="text-center title">{{title.conTitle}}</h1>
                        <div class="describe text-info">{{title.conDescribe}}</div>
                        <div class="text-center">点击编辑标题或描述</div>
                    </div>
                    <el-divider></el-divider>
                    <div v-for="(item,index) in questions" :key="item.quQueid">
                        <!-- item为每个题目的对象 -->
                        <component :is='handleComponents(item.queType)' :question="item" :index="index"
                            :isEditQues="true"></component>
                        <!-- <Simple v-if="item.queType=='0'" :question="item" :index="index" :isEditQues="true"></Simple>
                        <Multiple v-if="item.queType=='1'" :question="item" :index="index" :isEditQues="true">
                        </Multiple>
                        <Fill v-if="item.queType=='2'" :question="item" :index="index" :isEditQues="true"></Fill> -->
                        <el-button type="text" @click="toQuesBank(item)">加入题库</el-button>
                        <el-divider></el-divider>
                    </div>
                </div>
            </el-col>
        </el-row>
        <Dialog></Dialog>
        <AddSimpleDialog></AddSimpleDialog>
        <AddMultipleDialog></AddMultipleDialog>
        <AddFillDialog></AddFillDialog>
        <AddDropDialog></AddDropDialog>
        <UpdateQues :isEditQues="true"></UpdateQues>
    </div>
</template>
<script>
    import Dialog from '../components/editQues/Dialog.vue'  //修改标题弹出框

    import Simple from '../components/editQues/Simple.vue'      //单个题目组件
    import Multiple from '../components/editQues/Multiple.vue'
    import Fill from '../components/editQues/Fill.vue'
    import Drop from '../components/editQues/Drop.vue'

    import AddSimpleDialog from '../components/editQues/AddSimpleDialog.vue'    //修改选项弹出框
    import AddMultipleDialog from '../components/editQues/AddMultipleDialog.vue'
    import AddFillDialog from '../components/editQues/AddFillDialog.vue'
    import AddDropDialog from '../components/editQues/AddDropDialog.vue'

    import UpdateQues from '../components/editQues/UpdateQues.vue'

    import BankForm from '../components/editQues/BankForm.vue'
    export default {
        name: 'EditQues',
        components: {
            Dialog,
            Simple,
            Multiple,
            Fill,
            AddSimpleDialog,
            AddMultipleDialog,
            AddFillDialog,
            UpdateQues,
            BankForm,
            AddDropDialog,
            Drop
        },
        data() {
            return {
                conId: '',
                title: {
                    conTitle: '',
                    conDescribe: ''
                },
                questions: [
                    /* {
                        "quConid": 1,
                        "quQueid": 1,
                        "queId": 1,
                        "queQue": "这是标题",
                        "queType": "1",
                        "queOptionA": "A,V,B",
                        "queOptionB": "A,V,B",
                        "queOptionC": "A,V,B",
                        "queOptionD": "A,V,B",
                    },
                    {
                        "quConid": 1,
                        "quQueid": 5,
                        "queId": 5,
                        "queQue": "这是标题1",
                        "queType": "1",
                        "queOptionA": "A,V",
                        "queOptionB": "A,V,B",
                        "queOptionC": "A,V,B",
                        "queOptionD": "A,V,B",
                    },
                    {
                        "quConid": 1,
                        "quQueid": 2,
                        "queId": 2,
                        "queQue": "22",
                        "queType": "0",
                        "queOptionA": "456",
                    },
                    {
                        "quConid": 1,
                        "quQueid": 3,
                        "queId": 4,
                        "queQue": "22",
                        "queType": "2",
                        "queOptionA": "456",
                    },
                    {
                        "quConid": 1,
                        "quQueid": 4,
                        "queId": 5,
                        "queQue": "22",
                        "queType": "4",
                        "queOptionA": "456",
                    }, */
                ],
            }
        },
        methods: {
            goBack() {
                this.$router.go(-1)
            },
            editName() {
                this.$bus.$emit('editName', {
                    conId: this.conId,
                    ...this.title
                })
            },
            addSimple() {
                this.$bus.$emit('addNewSimple', this.conId)
            },
            addMultiple() {
                this.$bus.$emit('addNewMultiple', this.conId)
            },
            addFill(type) {
                this.$bus.$emit('addNewFill', this.conId, type)
            },
            addDrop() {
                this.$bus.$emit('addNewDrop', this.conId)
            },
            addQues(val) {
                this.questions.push(val)
            },
            addIndex() {
                this.nowQuesIndex = this.nowQuesIndex + 1
            },

            handleComponents(type) {
                if (type == 0) {
                    return Simple
                } else if (type == 1) {
                    return Multiple
                } else if (type == 2 || type == 3) {
                    return Fill
                } else if (type == 4) {
                    return Drop
                }
            },

            emitServer() {
                axios({
                    method: 'GET',
                    url: '/question/queryQuestion/que',
                    withCredentials: true,
                    params: {
                        quConid: this.conId
                    },
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    this.questions = result.data
                }).catch((err) => {

                });
            },

            getTitle() {
                axios({
                    methods: 'GET',
                    url: '/question/queryQuestion/title',
                    withCredentials: true,
                    params: {
                        conId: this.conId
                    },
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    this.title = result.data[0]
                }).catch((err) => {

                });
            },
            toQuesBank(question) {
                console.log('加入题库', question);
                axios({
                    method: 'POST',
                    url: '/questionBank/insertQuestion',
                    withCredentials: true,
                    data: JSON.stringify(question),
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    if (result.data.data == true) {
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        })
                        this.$bus.$emit('addQuesToBank')
                    } else {
                        this.$message({
                            message: result.msg,
                            type: 'error'
                        })
                    }
                }).catch((err) => {
                    this.$message({
                        message: err.message,
                        type: 'info'
                    })
                });
            },
            toPublish() {
                this.$router.push({
                    name: 'publish',
                    query: {
                        conId: this.conId,
                        conTitle: this.title.conTitle,
                        conDescribe: this.title.conDescribe
                    }
                })
            }

        },
        mounted() {
            this.conId = this.$route.query.conId
            // this.questions = []
            console.log(this.conId);

            this.getTitle()
            this.emitServer()

            this.$bus.$on('editTItleSuccess', () => {
                this.getTitle()
            })
            this.$bus.$on('addQuesSuccess', () => {
                this.emitServer()
            })
        },
        beforeDestroy() {
            this.$bus.$off('editTItleSuccess')
            this.$bus.$off('addQuesSuccess')
        },
    }
</script>
<style scoped>
    .title {
        font-size: 28px;
    }

    .el-page-header {
        margin-bottom: 15px;
    }

    .new-ques-button {
        width: 100%;

    }

    .describe {
        padding: 5px 20px;
    }

    .quesTitle {
        cursor: pointer;
    }

    .quesBody {
        max-height: calc(100vh - 140px);
        overflow: auto;
    }

    .emitQues {
        width: 100%;
        margin-bottom: 20px;
    }

</style>